<style scoped>

</style>
<template>
  <div class="searchbar">
    <div class="weui-search-bar"  id="searchBar">
      <form class="weui-search-bar__form"     action="javascript:return true;">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput"   @keyup.13="onSearch" placeholder="搜索" ref="search">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </label>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel" @click="onCancel">取消</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data () {
    return {
      value: '',
    }
  },
    mounted() {

        this.$nextTick(function(){
            var requestParam = this.GetRequest();
            var requestSearch = requestParam.search;
            if(requestSearch != undefined){
                this.$refs.search.value = requestSearch;
                this.onSearch('');
                $('#searchBar').addClass(' weui-search-bar_focusing')

            }
        })


    },
  methods: {
    onSearch (val) {
      this.$emit('doSearch', this.$refs.search.value);
      this.$refs.search.blur();
    },
    onCancel () {
      this.$emit('doSearch', '');
      this.$refs.search.blur();
    },
      /*
    *添加微信通知，点击url搜索到制定的货运单
    *2020-1-21
    *liukx
    *
  */
    GetRequest() {
        return  this.$route.query;
    }
  }
}
</script>
